<template>
  <div class="test-container">
    <h3>API测试页面</h3>
    
    <el-card class="mb-4">
      <h4>员工API测试</h4>
      <el-button @click="testEmployeeList">获取员工列表</el-button>
      <div v-if="employeeResult">
        <pre>{{ JSON.stringify(employeeResult, null, 2) }}</pre>
      </div>
    </el-card>

    <el-card class="mb-4">
      <h4>项目API测试</h4>
      <el-button @click="testProjectList">获取项目列表</el-button>
      <div v-if="projectResult">
        <pre>{{ JSON.stringify(projectResult, null, 2) }}</pre>
      </div>
    </el-card>

    <el-card class="mb-4">
      <h4>预约API测试</h4>
      <el-button @click="testOrderList">获取预约列表</el-button>
      <div v-if="orderResult">
        <pre>{{ JSON.stringify(orderResult, null, 2) }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { getEmployeeList } from "@/api/employee";
import { getProjectList } from "@/api/project";
import { getOrderList } from "@/api/order";

const employeeResult = ref(null);
const projectResult = ref(null);
const orderResult = ref(null);

async function testEmployeeList() {
  try {
    const response = await getEmployeeList({ status: "1" });
    employeeResult.value = response;
    ElMessage.success("员工列表获取成功");
  } catch (error) {
    console.error("员工列表获取失败:", error);
    ElMessage.error("员工列表获取失败");
  }
}

async function testProjectList() {
  try {
    const response = await getProjectList({ status: "1" });
    projectResult.value = response;
    ElMessage.success("项目列表获取成功");
  } catch (error) {
    console.error("项目列表获取失败:", error);
    ElMessage.error("项目列表获取失败");
  }
}

async function testOrderList() {
  try {
    const today = new Date();
    const dateStr = today.toISOString().split('T')[0];
    const response = await getOrderList({
      start_date: dateStr + " 00:00:00",
      end_date: dateStr + " 23:59:59"
    });
    orderResult.value = response;
    ElMessage.success("预约列表获取成功");
  } catch (error) {
    console.error("预约列表获取失败:", error);
    ElMessage.error("预约列表获取失败");
  }
}
</script>

<style scoped>
.test-container {
  padding: 20px;
}

.mb-4 {
  margin-bottom: 16px;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 300px;
}
</style>
